<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<?php
	echo $this->headMeta();
	echo $this->headTitle();
	echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/stabs.jquery.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/visualize/js/excanvas.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/visualize/js/visualize.jQuery.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/jwysiwyg/wysiwyg.jquery.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/accordion.jquery.js', 'text/javascript');
	echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.qtip.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.ui.core.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.ui.widget.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.ui.mouse.js', 'text/javascript');         
        echo $this->headScript()->setFile($this->baseUrl().'/js/jquery.ui.sortable.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/libraries.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/json.debug.js', 'text/javascript');        
        echo $this->headScript()->setFile($this->baseUrl().'/js/parse.uri.js', 'text/javascript');
        echo $this->headScript()->setFile($this->baseUrl().'/js/jhub1.ajax.js', 'text/javascript');       
        echo $this->headLink()->setStylesheet($this->baseUrl().'/css/jquery.qtip.css');
	echo $this->headLink()->setStylesheet($this->baseUrl().'/css/global.css');
	echo $this->headLink()->setStylesheet($this->baseUrl().'/js/visualize/css/visualize.css');
	echo $this->headLink()->setStylesheet($this->baseUrl().'/js/jwysiwyg/wysiwyg.css');
	?>
<!--
        <style type="text/css">
		@import "/css/global.css";
		@import "/js/visualize/css/visualize.css";
		@import "/js/jwysiwyg/wysiwyg.css";
	</style>
-->
<script type="text/javascript">
    var jhub1 = new Jhub1();
    // Current URI to be used by AJAX requests
   // var currentUri;
   // var showAllNewHubs = 0;

    $(function() {


    var newHash      = "",
        $mainContent = $("#view-wrapper"),
   //     $pageWrap    = $("#wrapper"),
    //    baseHeight   = 0,
        $el;
        
  //  $pageWrap.height($pageWrap.height());
   // baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("#tab-list, .primary-navigation, .ajaxLink").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
  //  $("#tab-list").delegate("a", "click", function() {
   //     window.location.hash = $(this).attr("href");
    //    return false;
    //});   
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
     //   if(parseUri(window.location).path != "/jhub1") {
         //   window.location = "/jhub1";
       // }
        
       // alert(parseUri(window.location).path);
        jhub1.currentUri = newHash;
        uri = newHash.substring(1).split("/");
        controller = uri[0];
        if(uri[1] === undefined ) 
            action = "index";
            else action = uri[1];
        jhub1.controller = controller;
        jhub1.action = action;
        if (newHash) {
            $mainContent
                .find("#view-content")
                .fadeOut(100, function() {
                    $("#view-wrapper-loader").show();
                    $mainContent.hide().load(newHash + " #view-content", function() {
                    $("#view-wrapper-loader").hide();   
                    $mainContent.fadeIn(100, function() {
                        //    $pageWrap.animate({
                          //      height: baseHeight + $mainContent.height() + "px"
                           // });
                           
                $('#actionForm').ajaxForm(function() { 
                    // alert("Thank you for your comment!"); 
                    //to do uncheck boxes
                    //      refresh images
                });            
         
                $("#tab-list").delegate("a", "click", function() {
                    window.location.hash = $(this).attr("href");
                    return false;
                });
                
                $(".action-buttons").delegate("a", "click", function() {
                    window.location.hash = $(this).attr("href");
                    return false;
                });
    
                $('tbody tr').hover(function() {
                    $(this).addClass("hover");
                },  function () {
                    $(this).removeClass("hover");
                });                        
 
                $(".object-checkbox").click(function() {
                    if (this.checked){
                       $(this).closest('tr').addClass('checked');
                    } else {
                       $(this).closest('tr').removeClass('checked');
                    } 
                });
 
                $("tbody tr:even").addClass("even");
                            
 		$('#jstest').hide();
                $('a[title]').qtip();
                var newOrder = "";
                var saveTimer = "";
                var count = 5;
                var countdown;                           

        if (action == "dashboard") {
            console.log('dashboard');
            $('#chart-one').visualize({type: 'bar', width: '850px', height: '220px'});
        }

                $('#sortable tbody').sortable({    items: 'tr',
                                                   axis: 'y',
                                                   delay: 300, 
                                                   forcePlaceholderSize: true,
                                                   forceHelperSize: true,
                                                   opacity: 0.7,
                                                   tolerance: 'pointer',
                                                   cursor: 'pointer',
                                                   helper: 'original',
                                                   containment: 'parent',
                                                   start: function (e, ui) {
                                                     //alert("started");
                                                       clearTimeout(saveTimer);
                                                       $("#countdown").fadeOut("fast");
                                                       count = 5;
                                                   },
                                                   stop: function (e, ui) {
                                                       // alert("updated");
                                                   },
                                                   change: function (e, ui) {
                                                       clearInterval(countdown);
                                                       count = 5;
                                                       // alert("updated");
                                                   },
                                                   update: function (e, ui) {
                                                        newOrder = "";
                                                        newOrder = $(this).sortable('toArray').toString();                                                        
                                                        saveTimer = setTimeout(function(){
                                                            $.get('/ajax/setorder', {order:newOrder, page:controller});
                                                            $("#sortable tbody tr").removeClass("even");
                                                            $("#sortable tbody tr:even").addClass("even");  
                                                        }, 6000);                                                       
                                                        countdown = setInterval(function(){
                                                            if (count > 0) {
                                                               $("#countdown").fadeIn("slow");
                                                               $("#countdown").html(count + " <?php echo $this->translate->_('seconds remaining!'); ?>");
                                                            } else {
                                                               $("#countdown").html("<?php echo $this->translate->_('Saving...'); ?>");
                                                               clearInterval(countdown);
                                                               $("#countdown").fadeOut("slow");
                                                            }
                                                            count--;
                                                        }, 1000);
                                                   }
                                                }); 

                                                $('#tabs-two').sTabs();

						$('#check-all-table-two').click(function() {
						  var check_all = $(this);
						  if(this.checked)
							{  check_all.parents('table').find('.object-checkbox').attr('checked', 'checked');
							}
							else
							{  check_all.parents('table').find('.object-checkbox').removeAttr('checked');
							}
						});

                        });
                       // $("nav a").removeClass("current");
                       // $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
        
    });
    
    $(window).trigger('hashchange');
    
});
</script>
<script type="text/javascript">

 // http://www.zachhunter.com/2010/04/json-objects-to-html-table/  
    
function CheckNewUsbHubs(requrl, process) {
    //alert( currentUrl );
    $.ajax({
        type: "POST",
        url: requrl,
        dataType: "json",
        data: {
                uri: jhub1.currentUri
               },
        success: function(res) {
            if (process) {
            jhub1.processObject(res);
            if (jhub1.newHubs > 0) {
                $('#newUsbHubsConnectedNotify').fadeIn('slow');
                jhub1.createNewHubsInfo();
            } else {
                $('#newUsbHubsConnectedNotify').fadeOut('slow');
            }
            if (jhub1.awaitingHubs > 0) {
                $('#awaitingUsbHubs').fadeIn();
            } else {
                $('#awaitingUsbHubs').fadeOut();
            }
            }
            $('a[title]').qtip();
       }
    });
}

function SetHubAwaiting(hubId) {
    CheckNewUsbHubs('/ajax/gatewayusbhub/method/markHubAwaiting/hubId/' + hubId);
    $('#row-' + hubId).remove();
    if (jhub1.newHubs == 0) {
        $('#newUsbHubsConnectedNotify').fadeOut('slow');
    }
}

function ShowHubAwaiting() {
    CheckNewUsbHubs('/ajax/gatewayusbhub/method/getNewUSBHubs');
}

$(document).ready(function() {
    CheckNewUsbHubs('/ajax/gatewayusbhub/method/getNewUSBHubs', 1);
    $('img.setAwaitingButton').live('click', function () {
        SetHubAwaiting($(this).attr('id'));
    });
//    setInterval( "CheckNewUsbHubs('/ajax/gatewayusbhub/method/getNewUSBHubs', 'awaiting')", 10000 );
    setInterval( "CheckNewUsbHubs('/ajax/systemping/hubMethod/getNewUSBHubs', 1)", 2000 );
});




</script>
<style type="text/css">
.ui-tooltip-wiki{
	max-width: 440px;
}

	.ui-tooltip-wiki .ui-tooltip-content{
		padding: 10px;
		
		line-height: 12.5px;
	}

	.ui-tooltip-wiki h1{
		margin: 0 0 7px;

		font-size: 1.5em;
		line-height: 1em;
	}

	.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
	
	.ui-tooltip-wiki p{ margin-bottom: 9px; }
	.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }

#status-bar {
    background: url("/images/block-head-cap-content-grey-bg.gif") repeat-x scroll 0 0 transparent;
    bottom: 0;
    height: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 200;
    height: 43px !important;
}
#status-bar-inner {
    background: url("/images/block-head-cap-content-grey-bg.gif") repeat-x scroll 0 0 transparent;
    height: 100%;
    margin: 0 10px;
}

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #000000;
}

.default
{
    font-size:20px;
    color: darkred;
    font-weight:bold;
}


</style>       
        
</head>
<body>
	<!-- Main Wrapper     -->
	<div class="wrapper">

<!-- TOP MENU ######################################################## -->
<?php 
      if($this->layout()->hasIdentity) { 
        echo $this->render('system_content.phtml');
      } else {
        echo $this->render('login_prompt.phtml');
      }
?>
<!-- TOP MENU END ######################################################## -->

<?php 
      if($this->layout()->hasIdentity) { 
?>          
<!--               	<div class="flash flash-notice">
		  	<img src="/images/icons/error.png" alt="" width="16" height="16" />
			<span>DEVICE DETECTED. with <a href="" title="">links to</a> act on</span>
			<div class="right"></div>
                        <img src="/images/icons/error.png" alt="" width="16" height="16" />
			<span>DEVICE DETECTED. with <a href="" title="">links to</a> act on</span>
			<div class="right"></div>
		</div> -->
<?php 
      }
?>
                <!-- Flash Failure -->
		<div class="flash flash-failure" id="jstest">
		  	<img src="/images/icons/delete.png" alt="" width="16" height="16" />
			<span><?php echo $this->translate->_('NoJavaScriptWarning'); ?>
<!-- The JHUB1 setup panel doesn't work without JavaScript. Please make sure that your browser has JavaScript turned on.--></span>
			<div class="right"></div>
		</div>
                

 
                
                
    
    
    
    
    
    
  		<!-- Colour Tabbed Block (Full Width) -->
		<div class="block block-colour"  id="newUsbHubsConnectedNotify" style="display: none">
			
			<!-- Block Header -->
			<div class="head">
				<div class="cap-left"></div>
				<div class="cap-right"></div>
				<div class="content">
				
					<!-- Block Title -->
					<h2>USB Hubs just connected</h2>
					<!-- /Block Title -->	
					<a class="block-icon">
                                            <img width="32" height="32" src="/images/block-icons/exclamation.png">
                                        </a>
				</div>
				<div class="clear-both"></div>
			</div>
			<!-- /Block Header -->
			
			<!-- Block Content -->
			<div class="block-content">
				<!-- Tab One -->
				<div id="tab-two-one">
					<!-- Standard Table -->
					<table cellpadding="0" cellspacing="0" border="0" class="standard-table" summary="Object Table">
					  <caption>Object Table Caption</caption>
						<thead>
							<tr>
								<th class="checkbox-cell">No.</th>
								<th>USB Device Name</th>
								<th class="center-cell">Insert Date</th>
								<th class="center-cell">Actions</th>
							</tr>
						</thead>
						<tbody id="newUSBHubsContent">
						<!-- 	<tr>
								<td class="checkbox-cell">1</td>
								<td>hfhffghfghghfghfhfhfhfhfghfghfhfghfhfhfhfhfhfh</td>
								<td class="center-cell">18.08.2010</td>
								<td class="action-cell center-cell">
									<a href="" title=""><img src="images/icons/page_white_edit.png" alt="" title="" width="16" height="16" /></a>
									<a href="" title=""><img src="images/icons/cross.png" alt="" title="" width="16" height="16" /></a>
								</td>
							</tr>
							<tr class="even">
								<td class="checkbox-cell">2</td>
								<td>nmbnmjbnmbnmbmbmbmbmbmbnmmhmhjmhjmmhmhmhmj</td>
								<td class="center-cell">18.08.2010</td>
								<td class="action-cell center-cell">
									<a href="" title=""><img src="images/icons/page_white_edit.png" alt="" title="" width="16" height="16" /></a>
									<a href="" title=""><img src="images/icons/cross.png" alt="" title="" width="16" height="16" /></a>
								</td>
							</tr> -->
						</tbody>
					</table>
					<!-- /Standard Table -->
				</div>
				<!-- /Tab One -->
			</div>
			<!-- /Block Content -->
			
			<!-- Block Footer Cap -->
			<div class="block-footer-cap">
				<div class="cap-left"></div>
				<div class="cap-right"></div>
				<div class="content"></div>
			</div>
			<!-- /Block Footer Cap -->
		</div>
		<!-- /Colour Tabbed Block (Full Width) -->  
                
                
                
                
                
                
                
		<!-- /Flash Failure   <div id="status-bar-inner">-->
                <div id="view-wrapper-loader" style='text-align: center; display: none;'>               
                    <img style='margin: 100px 0px 0px 0px;' src='/images/ajax-working-big-white.gif' width='64' height='54'/>
                </div>                
                <div id="view-wrapper">
<?php echo $this->layout()->content ?>
                </div>
              
                        
<div id="status-bar">
    <div class="action-set-pagination">
<div id="awaitingUsbHubs" class="ajaxLink" style="display: none;"><a href="/hubs/new"><img onClick="ShowHubAwaiting();" width="32" height="32" src="/images/block-icons/exclamation.png"></a></div>   
<img style='margin: 10px 0px 0px 0px;' src='/images/ajax-message2.png' width='25' height='25'/>  
        <div class="right">

							<ul class="pagination">
                                                            <li class="first" id="countdown"></li>
                                                            <li> </li>
                                                            <li>jhub1.org</li>
							</ul>
         <!--   <p class="inner_text_shadow default">jhub1.org</p>  -->
						</div>
        
    </div>
       
</div>
                        
         
                
		<!-- Footer     </div> -->
		<div class="footer">
			<p>

			</p>
		</div>
		<!-- /Footer -->
	
	</div>
	<!-- /Main Wrapper -->
              
</body>
</html>
